<style lang="scss" scoped>
  page{
    background: #f8f8f8;
  }
  .page-wrap{
    height: 100vh;
    display: flex;
    flex-direction: column;
  }
  .nav-list{
    height: 50px;
    width: 750rpx;
    padding: 0px 15px;
    overflow-y: hidden;
    overflow-x: scroll;
    background: #fff;
    box-sizing: border-box;
    border-bottom: 1px solid #eee;
    .nav-item{
      display: inline-block;
      font-size: 14px;
      color: #333;
      height: 50px;
      box-sizing: border-box;
      line-height: 50px;
      margin-right: 20px;
      &.active{
        border-bottom:1px solid $fun-primary-color;
      }
    }
  }
  .order-list{
    flex:1;
    padding-bottom: 20rpx;
    overflow-y: scroll;
    .order-item{
      background: #fff;
      margin: 20rpx 25rpx 0;
      border-radius: 10rpx;
      padding: 25rpx;
      .order-action{
        text-align: right;
        .order-action-btn{
          display: inline-block;
          padding: 0 30rpx;
          height: 60rpx;
          line-height: 60rpx;
          font-size: 26rpx;
          border-radius: 30rpx;
          border: 1px solid #e1e1e1;
          color: #555;
        }
      }
      .order-goods-list{
        .order-goods-item{
          margin-bottom: 30rpx;
          display: flex;
          &:last-child{
            margin-bottom: 0;
          }
          .goods-logo{
            width: 150rpx;
            height: 150rpx;
            border-radius: 6rpx;
            @include cover-img();
            margin-right: 30rpx;
          }
          .goods-info{
            flex: 1;
          }
          .pricenum{
            margin-left: 30rpx;
          }

        }
      }
    }
  }
</style>
<template>
  <div class="page-wrap">
    <div class="nav-list">
      <div class="nav-item" :class="{active:idx===navIndex}" v-for="(item,idx) in navs" :key="idx" @click="setActiveIndex(idx)">{{item.label}}</div>
    </div>
    <div class="order-list">
      <div class="order-item" v-for="(order,idx) in orderList" :key="idx" @click="toOrderDetail(order)">
        <div class="flex flex-vertical-c flex-justify-between">
          <div class="fz-13 c3">单号: {{order.order_no}}</div>
          <div class="fz-13 color-orange">{{order.status_text}}</div>
        </div>
        <div class="order-goods-list m-t-20 m-b-20">
          <div class="order-goods-item" v-for="(goods,idx2) in order.list" :key="idx2">
            <div class="goods-logo" :style="{backgroundImage:'url('+goods.goods_logo+')'}"></div>
            <div class="goods-info">
              <div class="c3 m-b-10 fz-13">{{goods.goods_title}}</div>
              <div class="c9 fz-12">{{goods.goods_spec}}</div>
            </div>
            <div class="pricenum">
              <div class="fz-12 c3 text-right">{{goods.price_selling}}</div>
              <div class="fz-10 c9 text-right">x{{goods.number_goods}}</div>
            </div>
          </div>
        </div>
        <div class="order-total c3 fz-12 text-right">
          共{{order.order_number_goods}}件 合计<span class="fz-14 fz-b">￥{{order.price_goods}}</span>
        </div>
<!--        <div class="order-action m-t-20" v-if="(order.pay_state===1 && order.status ===3) || (order.pay_state===0 && order.status ===2)">-->
<!--          <div class="order-action-btn" @click="cancelOrderFunc(order)">取消订单</div>-->
<!--        </div>-->
      </div>
    </div>

  </div>
</template>

<script>
import { order } from '@/api/user'
import { Exception } from '@/common/Exception'
import { linkToEasy } from '@/common/fun'
import { pageMixin } from '@/mixins'

export default {
  mixins: [pageMixin],
  name: 'demo',
  data () {
    return {
      orderList: [

      ],
      navIndex: 0,
      navs: [
        { label: '全部', filter_status: 0 },
        // { label: '待付款', filter_status: 1 },
        // { label: '处理中', filter_status: 2 },
        // { label: '未出行', filter_status: 3 },
        // { label: '待评价', filter_status: 4 },
        // { label: '退款/售后', filter_status: 5 }
      ]
    }
  },
  methods: {
    toOrderDetail (orderInfo) {
      linkToEasy(`/pages/order/detail?id=${orderInfo.id}`)
    },
    setActiveIndex (idx) {
      this.navIndex = idx
      this.bindNavChange()
    },
    async bindNavChange () {
      const list = await order({ size: 0, filter_status: this.navs[this.navIndex].filter_status }).then(res => res.data).catch(err => Exception.handle(err))
      this.orderList = list
    }
  },
  created () {
    this.bindNavChange()
  }
}
</script>
